<template>
    <div class="page-container" v-loading="loading">
        <ComTitle :list="['人员管理']" />
        <Search v-model="keyword" @search="handleSearch" />
        <div v-if="data.length" class="table-container">
            <el-table :data="data" v-loading="loading">
                <el-table-column type="index" label="序号" :width="80">
                    <template v-slot="scope">
                        {{ tableIndex(scope.$index) }}
                    </template>
                </el-table-column>
                <el-table-column prop="account" label="用户名"></el-table-column>
                <el-table-column prop="email" label="邮箱"></el-table-column>
                <el-table-column prop="roleName" label="角色"></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <div class="action-btn">
                            <SCButton
                                class="default-btn"
                                type="primary"
                                @click="openChangeRole(scope.row)"
                                >修改角色</SCButton
                            >
                        </div>
                    </template>
                </el-table-column>
            </el-table>

            <SCPagination
                class="pagination"
                v-model:current-page="pageNum"
                v-model:page-size="pageSize"
                :total="total"
                layout="prev,pager,next,sizes,jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
        <Empty v-else />

        <SCDialog v-model="visible" title="修改角色" :width="400">
            <SCForm :model="form" :rules="rules" ref="formRef" :label-width="80">
                <SCForm-item class="accout-form-item" prop="accout" label="用户名：">{{
                    currentRow?.account
                }}</SCForm-item>
                <SCForm-item prop="roleId" label="角色：">
                    <SCSelect v-model="form.roleId">
                        <SCOption
                            v-for="item in roleOpts"
                            :value="item.id"
                            :label="item.name"
                            :key="item.id"
                        />
                    </SCSelect>
                </SCForm-item>
            </SCForm>
            <template #footer>
                <SCButton class="default-btn" @click="visible = false">取消</SCButton>
                <SCButton type="primary" @click="handleChangeRole" v-loading="submitLoding"
                    >确定</SCButton
                >
            </template>
        </SCDialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import ComTitle from "@/components/ComTitle.vue";
import Search from "@/components/Search.vue";
import { useRouter, useRoute } from "vue-router";
import { Department, getDepartments, getStaffs, Staff, updateRole } from "@/api/userManage";
import { SCMessage } from "@sribd/sc-ui/lib";
import Empty from "@/components/Empty.vue";
import { getRoles, Role } from "../../api/roleManage";
import { FormInstance } from "element-plus";

type DepartmentItem = Department & { iconNum?: number };
const router = useRouter();
const loading = ref(false);
const keyword = ref("");
const route = useRoute();
const id = parseInt(route.params.id as string);
const pageNum = ref(1);
const pageSize = ref(10);

const name = ref("");
const total = ref(0);
const data = ref<Staff[]>([]);
const roleOpts = ref<Role[]>([]);
const handleSearch = async () => {
    loading.value = true;
};

handleSearch();

const queryDetail = async () => {
    loading.value = true;
    try {
        // const res = await getStaffs({
        //     departmentId: id,
        //     page: pageNum.value,
        //     pageSize: pageSize.value,
        // });
        // data.value = res.list;
        // total.value = res.total;
        data.value = [
            {
                id: 2,
                account: "test",
                email: "test@sribd.com",
                roleName: "管理员",
            },
            {
                id: 3,
                account: "zhandanfeng",
                email: "test1@sribd.com",
                roleName: "管理员",
            },
        ];
    } catch (error) {
        SCMessage({ message: error.msg || "获取列表失败", type: "error" });
    } finally {
        loading.value = false;
    }
};

queryDetail();

const handleSizeChange = (size) => {
    pageNum.value = 1;
    pageSize.value = size;
    queryDetail();
};

const handleCurrentChange = (page) => {
    pageNum.value = page;
    queryDetail();
};

const tableIndex = (index) => {
    return (pageNum.value - 1) * pageSize.value + index + 1;
};

let currentRow: Staff;
const visible = ref(false);
const form = reactive<any>({
    roleId: "",
});
const rules = {
    roleId: [{ required: true, message: "请选择角色" }],
};
const formRef = ref<FormInstance>();

const openChangeRole = (row: Staff) => {
    //获取角色列表
    const params = {
        name: "",
        page: 1,
        pageSize: -1,
    };
    // getRoles(params)
    //     .then((res) => {
    //         roleOpts.value = res.list;
    currentRow = row;
    form.roleId = row.roleId;
    formRef.value && formRef.value?.clearValidate();
    visible.value = true;
    //     })
    //     .catch((error) => SCMessage({ message: error.msg || "获取角色列表失败", type: "error" }));
};

const submitLoding = ref(false);
const handleChangeRole = () => {
    formRef.value?.validate(async (valid) => {
        if (valid) {
            submitLoding.value = true;
            try {
                // await updateRole({
                //     roleId: form.roleId,
                //     userId: currentRow.id,
                // });
                visible.value = false;
                queryDetail();
            } catch (error) {
                SCMessage({ message: error.msg || "修改角色失败", type: "error" });
            } finally {
                submitLoding.value = false;
            }
        }
    });
};
</script>

<style lang="scss" scoped>
.list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 12px;
    // min-height: calc(100vh - 100px);
}
:deep(.no-content) {
    height: calc(100vh - 200px);
}

:deep(.sc-form) {
    display: block;
}

:deep(.sc-form-item) {
    display: block;
    width: 100%;
    --el-form-inline-content-width: 100%;
    .sc-select {
        width: 100%;
    }
}

.accout-form-item {
    word-break: break-all;
    text-align: justify;
}
.table-container {
    margin-top: 20px;
}
</style>
